<template>
  <!-- newsList   START -->
  <div class="container text-center long-container">
    <div class="row">
      <div class="col-lg-12 news-nav">
        <span class="news-style" :class="{'active-nav':isShowNav}" @click="changeNav('news')">公司新闻</span>
        <span class="news-style" :class="{'active-nav':!isShowNav}" @click="changeNav('trends')">行业动态</span>
      </div>
    </div>
    <div class="row" :class="{'active-list-trends':isShowTrends}">
      <div class="col-sm-6 col-md-4" :class="{ 'active-list-news':isShowNews }" v-for="n in newsList" :key="n.id">
        <transition name="newsList" appear class="animate__animated" enter-active-class="animate__fadeInUp">
          <div class="thumbnail long-thumbnail" @click="goNewsDetail(n)">
            <div class="img-container">
              <img :src="n.imgUrl" alt="companyNew" />
            </div>
            <div class="caption long-caption">
              <h3>
                {{ n.title }}
              </h3>
              <p class="date">{{ n.releaseDate }}</p>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
  <!-- newsList   END -->
</template>

<script>
  import { onMounted, ref } from "vue";
  import { useNewsStore } from "../../../store/news"  //引入news仓库
  import { storeToRefs } from 'pinia'  //引入方法让仓库里的值可以解构赋值并且具有响应式
  import { useRouter } from "vue-router";
  export default {
    name: "NewsList",
    setup() {
      const store = useNewsStore();
      const router = useRouter();
      onMounted(() => {
        sendNewLists()  ////通知vuex发送请求H获取新闻列表的数据
      });
      //数据
      let { newsList } = storeToRefs(store)  //从仓库获取新闻列表的数据
      let isShowNav = ref(true)  //导航选中样式
      let isShowNews = ref(false)  //切换公司新闻选项卡动画
      let isShowTrends = ref(false)  //切换行业动态选项卡动画
      //方法
      //通过编程式导航的方式将参数传递到新闻详情页
      function goNewsDetail(n) {
        router.push({
          path: "/news/newsdetails",
          query: {
            imgUrl: n.imgUrl,
            title: n.title,
            content: JSON.stringify(n.content),
            releaseDate: n.releaseDate,
          }
        });

        //将该函数包裹一个定时器确保可以获取跳转页面后的指定位置的id
        setTimeout(() => {
          var goDetailTop = document.getElementById('long-left')
          goDetailTop.scrollIntoView({
            behavior: 'smooth',//平滑滚动
            block: "center"//将指定位置滚动到页面中间
          })
        }, 100)
      }

      function changeNav(id) {
        if (id == 'trends') {//点击 行业动态
          isShowNav.value = false  //将 行业动态 选项卡设为选中的样式
          sendTrends() //发送请求获取 行业动态 数据

          isShowTrends.value = true  //加载 行业动态 列表动画
          if (isShowNews.value) {
            isShowNews.value = false  //点击 行业动态 选项卡的时候卸载行业动态列表动画
          }


        } else if (id == 'news') {//点击 公司新闻
          isShowNav.value = true  //将 公司新闻 选项卡设为选中的样式
          sendNewLists()  //发送请求获取新闻列表数据

          isShowNews.value = true  //加载 公司新闻 列表动画
          isShowTrends.value = false  //点击 公司新闻 选项卡的时候卸载 行业动态 列表动画
        }
      }

      //通知vuex发送请求获取新闻列表的数据
      function sendNewLists() {
        store.getNewsList()
      }
      //通知vuex发送请求获行业动态的数据
      function sendTrends() {
        store.getTrends()
      }

      return {
        newsList,
        isShowNav,
        isShowNews,
        isShowTrends,
        goNewsDetail,
        changeNav
      };
    },
  };
</script>

<style scoped>
  /* newsList   START */
  .long-container {
    margin-top: 80px;
    margin-bottom: 60px;
  }

  /* 头部导航   START */
  .news-nav {
    height: 60px;
    width: 100%;
    margin-bottom: 60px;
  }

  .news-nav .news-style {
    background-color: #f8f8f8;
    color: #999;
    font-size: 18px;
    font-family: "Source Han Sans CN";
    display: inline-block;
    width: 50%;
    height: 100%;
    line-height: 60px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: all 0.2s linear;
  }

  .news-nav .news-style:hover {
    color: #666;
    background-color: #f1f1f1;
  }

  .news-nav .active-nav {
    background-color: #4f68ac20;
    color: #4F68AC;
    font-size: 20px;
    font-weight: 550;
    transition: all 0.2s linear;
  }

  .news-nav .active-nav:hover {
    background-color: #4f68ac20;
    color: #4F68AC;
  }

  /* 头部导航   END */

  .long-container .long-thumbnail {
    border: 0 solid #eeeeee;
    border-radius: 0px;
    padding: 20px 20px 10px 20px;
    margin-bottom: 40px;
    cursor: pointer;
    transition: all 0.2s linear;
  }

  .long-container .long-thumbnail:hover {
    box-shadow: 1px 10px 34px 1px rgb(0 0 0 / 10%);
    transform: translateY(-3px);
  }

  .long-container .long-thumbnail .img-container {
    height: 182px;
    width: 100%;
    overflow: hidden;
  }

  .long-container .long-thumbnail .img-container img {
    width: 100%;
    background-color: #f1f1f1;
  }

  .long-container .long-thumbnail .long-caption h3 {
    font-family: "Source Han Sans CN";
    font-size: 18px;
    text-align: left;
    color: #666666;
    height: 50px;
    line-height: 26px;
    margin-top: 10px;
    margin-bottom: 5px;
    /* 文本超出两行显示省略号 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 这里是超出几行省略 */
    overflow: hidden;
  }

  .long-container .long-thumbnail .long-caption .date {
    font-family: "Source Han Sans CN";
    font-size: 15px;
    color: #999999;
    text-align: right;
    margin-bottom: 5px;
  }


  /* 新闻列表加载动画 */
  .active-list-news {
    animation: fadeIn ease;
    animation-duration: 1s;
  }

  /* 行业动态列表加载动画 */
  .active-list-trends {
    animation: fadeIn ease;
    animation-duration: 1s;
  }

  /* newsList   END */
</style>